<template>
  <view>
    <wd-popup
      class="cu-modal"
      :closeOnClickModal="false"
      customStyle="width: '90vw'"
      v-model="showDia"
    >
      <view class="cu-dialog bg-white" @tap.stop="">
        <view class="cu-bar flex items-center">
          <text class="action" style="margin-right: 30rpx; font-size: 30rpx">app下载进度</text>
        </view>
        <view class="pop_c">
          <view class="content">已下载 {{ progress }}%</view>
          <view class="content">{{ finishSize }}M/共{{ totalSize }}M</view>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script lang="ts" setup name="">
import { useShowMsgStore } from '@/stores/useShowMsgStore';

const ShowMsgStore = useShowMsgStore();

const emit = defineEmits(['hideModal', 'checkLeaguer']);
const props = defineProps({
  progress: {
    type: [Number, String],
    default: 0,
  },
  finishSize: {
    type: [Number, String],
    default: 0,
  },
  totalSize: {
    type: [Number, String],
    default: 0,
  },
});
const showDia = computed(() => {
  return ShowMsgStore.showDia;
});
</script>

<style scoped lang="scss">
.cu-bar {
  // padding: 10rpx 20rpx;
  position: relative;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  border-bottom: 1rpx solid #f1f1f1;
}

.cu-bar .action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  min-height: 50px;
  margin-right: 0;
  font-size: 30rpx;
}

.checked {
  display: flex;
  width: 100%;
  padding: 0 30rpx;
  font-size: 28rpx;
  line-height: 80rpx;
  text-align: left;
}

.checked scroll-view {
  flex: 1;
  max-width: 480rpx;
  white-space: nowrap;
}

.checked text {
  margin-right: 20rpx;
}

.swiper {
  height: calc(100% - 182rpx);
}

.search {
  height: 80rpx;
  padding: 0 15rpx;
  margin: 0 30rpx;
  font-size: 28rpx;
  text-align: left;
  border: 1rpx solid #f1f1f1;
  border-radius: 10rpx;
}

.content {
  padding: 0 30rpx;
  font-size: 32rpx;
}

.tabs-wrap {
  width: 100%;
}

.tabs {
  position: relative;
  height: 90rpx;
  line-height: 90rpx;
  text-align: left;
}

.tabs .item {
  display: inline-block;
  font-weight: 100;
}

.text-grey,
.line-grey,
.lines-grey {
  color: #8799a3;
}

.icon {
  display: inline-block;
  width: 2em;
  text-align: center;
}

.tabs .son {
  position: absolute;
  bottom: 0;
  height: 8rpx;
  transition: all 0.6s;
}

.bg-gradual-blue {
  color: #fff;
  background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
}
/* 	.indicate{
		height: 8rpx;
		position: relative;
	}
	.indicate .son{
		height:8rpx;
		position: absolute;
		transition: all .6s;
	} */
.options {
  height: 600rpx;
  padding: 30rpx 0;
  overflow-y: scroll;
  text-align: left;
  transition: all 0.3s;
}

.option {
  display: flex;
  justify-content: space-between;
  font-weight: 100;
  line-height: 80rpx;
  border-top: 1rpx solid #f8f8f8;
}

.options .option:first-child {
  border-top: none;
}

.cu-dialog {
  width: 90vw;
  height: 80vh;
  max-height: 880rpx;
  padding: 10rpx 0;
  font-size: 26rpx;
}

.no-task {
  height: calc(100% - 110rpx);
  font-size: 24rpx;
  color: #8a8a8a;
  text-align: center;
  letter-spacing: 2rpx;
}

.no-task image {
  width: 100rpx;
  height: 100rpx;
  margin-top: 100rpx;
}

.search-results {
  height: calc(100% - 110rpx);
  padding: 0 35rpx;
  margin-top: 30rpx;
  overflow-y: scroll;
}

.search-results .row {
  display: flex;
  line-height: 80rpx;
  text-align: left;
  border-top: 1rpx solid #f1f1f1;
}

.search-results .row:first-child {
  border-top: none;
}

.search-results .row .name {
  width: 180rpx;
}

.search-results .row .user {
  width: 180rpx;
}

.search-results .row .dept {
  flex: 1;
}
</style>
